<template>
    <div class="science-login">
        <div class="JPdom" ref="JPdom" :style="{ backgroundColor: jpdataColor }"></div>
        <div class="science-center" :style="{ backgroundImage: `url(${logoimg})` }">
            <div class="science-data" v-show="name == '登录'" @keyup.enter="login">
                <header>账户登录</header>
                <el-form ref="formref" :model="form" label-width="95px" size="default" label-position="top">
                    <el-form-item class="text-item" label="账号/手机号">
                        <el-input placeholder="账号/手机号" name="phonenum" v-model="form.phonenum"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" class="text-item">
                        <el-input placeholder="密码" name="password" type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12" class="col m-0 p-0">
                            <button class="btn d-block btn-login2" type="button" @click="login">登录</button>
                        </el-col>
                        <el-col :span="12">
                            <!-- <button class="btn d-block btn-login2" type="button" @click="name = '忘记密码'">忘记密码</button> -->
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { inject, onMounted, onUnmounted, reactive, ref } from "vue";
import {
    asynclogin,
} from "../../api/index";
import JParticles, { Particle } from 'jparticles'
import { ElForm, ElMessage } from "element-plus";
import { Storekey } from "../../interface";
import { useRouter } from "vue-router";
const router = useRouter()

const form = reactive({
    password: "",
    phonenum: "",
})



const name = ref('登录')



const store = useStore(Storekey)

const jpdataColor = inject<string>('jpdataColor')
const logoimg = inject<string>('logoimg')

async function login() {
    const { phonenum, password } = form;
    asynclogin({ ID: 'kangbang' + phonenum, password }).then(() => {
        store.dispatch('actiononline').then(() => {
            router.push('/main')
        })
    }).catch((e) => {
        ElMessage.error(e);
    })
}












const JPdom = ref()
const jpdata = ref<Particle>()

function jp() {
    if (JPdom.value) {
        jpdata.value = new JParticles.Particle(JPdom.value, {
            color: "#fff",
            proximity: 90,
            range: 100,
            num: 0.1,
            maxR: 2.4,
            minR: 0.6,
            maxSpeed: 0.8,
            minSpeed: 0.1,
        })
    }
}

onMounted(() => {
    jp()
})

onUnmounted(() => {
    jpdata.value?.onDestroy()
    jpdata.value = undefined
})


</script>

<style scoped>
.science-login {
    display: grid;
    height: calc(100vh - 89px);
    width: 100vw;
    align-content: center;
    position: relative;
    overflow: hidden;
    margin-top: -64px;
}

.science-center {
    width: 932px;
    height: 518px;
    background-repeat: no-repeat;
    background-size: contain;
    /* background: #43BEF3; */
    margin: 0 auto;
    box-shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    border-radius: 8px;
    z-index: 1;
    display: flex;
}

.science-data {
    width: 442px;
    padding-left: 48px;
    padding-right: 74px;
    color: #fff;
    --color-43: #fff;
    padding-top: 48px;
}

.science-data header {
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 48px;
}

.btn-login1 {
    width: 148px;
    color: #fff;
    background: #1B3694;
    border-radius: 2px;
}

.btn-login2 {
    width: 148px;
    color: #fff;
    background: #17B44C;
    border-radius: 2px;
}

.btn-login3 {
    width: 148px;
    color: #fff;
    background: #17B44C;
    border-radius: 2px;
}

.text-item {
    margin-bottom: 24px;
}

.JPdom {
    position: fixed;
    height: calc(100vh + 64px);
    width: 100vw;
}

.science-text {
    margin-left: 48px;
    width: 217px;
    height: 33px;
    background: #164065;
    text-align: center;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1);
    color: #fff;
    line-height: 32px;
    margin-top: 140px;
}
</style>